<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>姓名案例_watch</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        computed和watch之间的区别:
            1.computed能完成的功能,watch都可以完成。
            2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。

        两个重要的小原则:
            1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
            2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数,这样this的指向才是vm或组件实例对象。 
        -->

    <div id="app">
        姓：<input type="text" v-model="firstName"/><br/><br/>
        名：<input type="text" v-model="lastName"/><br/><br/>
        全名：<span>{{fullName}}</span>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
                firstName: '张',
                lastName: '三',
                fullName: '张-三'
           },
           watch: {
                //watch的简写形式
               firstName(val){
                   //相比于computed，watch可以开启异步任务
                    setTimeout(() => {
                        this.fullName=val + "-" + this.lastName;
                    }, 1000);
               },
               lastName(val){
                   this.fullName=this.firstName + "-" + val;
               }
           }
        });
    </script>
</body>

</html>